<template>
  <div class="header-search-wrap">
    <div class="inner-switch-search-container" v-if="type === 'inner-switch'">
      <div class="tab-mixin-search">
        <Tabs :tabList="tabs" @selectTab="selectTab" :selectedIndx="selectedIndx" justifyContent="start" ></Tabs>
        <InputSearch placeholder="输入搜索内容" btnTitle="搜索" @search="handleSearch" :isBtn="true" />
      </div>
    </div>
    <div v-else>
      <Tabs
        :tabList="tabs"
        @selectTab="selectTab"
        :selectedIndx="selectedIndx"
      ></Tabs>
      <div class="searchClass">
        <InputSearch
          placeholder="输入搜索内容"
          btnTitle="搜索"
          @search="handleSearch"
          :isBtn="true"
        />
      </div>
    </div>
  </div>
</template>

<script>
import InputSearch from '@/components/InputSearch/index.vue'
import { mapMutations } from 'vuex'
import { projectKey } from '@/utils/gettingEnv'
import Tabs from '@/components/tabs'
export default {
  props: {
    type: String
  },
  data() {
    return {
      tabs: [
        {
          name: '成果',
          path: '/achievementDisplay/tradingMarketInfos',
          key: 'result'
        },
        {
          name: '需求',
          path: '/TechnicalRLibrary/techDealInfos',
          key: 'demand'
        },
        {
          name: '服务',
          path: '/serviceAndSupport',
          key: 'service'
        },
        { name: '资讯', path: '/generalInfo', key: 'info' }
      ],
      path: '/achievementDisplay/tradingMarketInfos',
      selectedTab: '成果',
      tabKey: 'result',
      selectedIndx: 0
    }
  },
  components: {
    InputSearch,
    Tabs
  },
  computed: {
    projectKey() {
      return projectKey()
    }
  },
  mounted() {
    this.switchDiffProjectOperation()
  },
  methods: {
    ...mapMutations('headerSearch', ['updateTabValue']),
    // 不同项目的不同处理
    switchDiffProjectOperation() {
      switch (this.projectKey) {
        case 'zhongshan':
          if(process.env.VUE_APP_OPERATION_VISIBLE) {
            const { HeaderOperation } = process.env.VUE_APP_OPERATION_VISIBLE
            const { tabs, ...otherParams } = HeaderOperation.quickSearchTabs
            Object.assign(this, { tabs: Object.values(tabs) }, otherParams)
          }
          break;
      
        default:  // 默认是广州的
          break;
      }
    },
    // 检索
    handleSearch(v) {
      const { tabKey } = this
      if (v.length < 2) {
        return this.$apiStatusHandler(999, '输入检索内容至少两个字以上')
      }
      // 更新到vuex中
      this.updateTabValue({ key: tabKey, value: v })
      this.$router.push({
        path: this.path,
        query: {
          keywords: v
        }
      })
    },
    // tab切换
    selectTab(val) {
      this.selectedIndx = val.index
      this.selectedTab = val.tab.name
      this.tabKey = val.tab.key
      this.path = val.tab.path
    }
  }
}
</script>
